<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城</title>
		<link rel="shortcut icon" href="img/favicon.ico">
		<style type="text/css">
			* {
				margin: 0 auto;
				padding: 0;
			}

			body {
				background-color: gainsboro;
			}

			.father {
				width: 1210px;
				height: 624px;
				border: 1px solid;
				margin-top: 20px;
			}

			.father div {
				float: left;
			}

			.father div:first-child {
				width: 234px;
				height: 614px;
				background-color: red;
			}

			.father div:first-child~div {
				width: 234px;
				height: 300px;
				background-color: white;
				margin-left: 10px;
				margin-bottom: 10px;
				text-align: center;

			}

			.father div:first-child~div:hover {
				/* 鼠标触碰后的样式==》手指 */
				cursor: pointer;
			}

			.father div:first-child~div:hover img {
				transform: scale(1.1);
			}

			.father div:first-child~div img {
				margin-top: 10px;
				transition: all 1s;
			}



			.father div:first-child~div p:nth-child(2) {
				margin-top: 15px;
				margin-bottom: 10px;
			}

			.father div:first-child~div p:nth-child(3) {
				font-size: 12px;
				color: gray;
			}

			.father div:first-child~div p:nth-child(4) {
				margin-top: 20px;
				color: red;
				font-size: 17px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div><img src="./img/小米商品/T1IhLjBC_T1RXrhCrK.jpg" alt=""></div>
			<div><img src="./img/小米商品/T1odEjB5bT1RXrhCrK.jpg" alt="">
				<p>大米智能家庭套装</p>
				<p>3分钟快速安装，30多种智能玩法</p>
				<p>199元</p>
			</div>
			<div><img src="./img/小米商品/T1JKxvBXhv1RXrhCrK.jpg" alt="">
				<p>大米随身WIFI 8GB U盘版</p>
				<p>随身上网神器，内置8GB U盘</p>
				<p>49.9元</p>
			</div>
			<div><img src="./img/小米商品/T18yZQBCET1RXrhCrK.jpg" alt="">
				<p>小蚁智能摄像机</p>
				<p>能看能听能说，手机远程观看</p>
				<p>149元</p>
			</div>
			<div><img src="./img/小米商品/T1YoZQByYT1RXrhCrK.jpg" alt="">
				<p>大米体重称</p>
				<p>高精度压力传感器 ｜ 手机管理全家健康</p>
				<p>99元</p>
			</div>
			<div><img src="./img/小米商品/T16nVjBCKT1RXrhCrK.jpg" alt="">
				<p>小蚁运动机</p>
				<p>边玩边录边拍，手机随时分享</p>
				<p>399元</p>
			</div>
			<div><img src="./img/小米商品/T18zWQB4WT1RXrhCrK.jpg" alt="">
				<p>大米路由器 mini</p>
				<p>主流双频AC智能路由器，性价比之王</p>
				<p>129元</p>
			</div>
			<div><img src="./img/小米商品/T1oixjB5bT1RXrhCrK.jpg" alt="">
				<p>大米智能插座</p>
				<p>手机远程遥控开关，带USB接口</p>
				<p>59元</p>
			</div>
			<div><img src="./img/小米商品/T1KzbQBvbT1RXrhCrK.jpg" alt="">
				<p>大米水质TDS检测笔</p>
				<p>准确检测家中水质纯度</p>
				<p>39元</p>
			</div>
		</div>
	</body>
</html>
